Se você já criou uma página web na sua vida já deve ter deparado com problemas de posicionamento de itens na página e de quanto apanhou para colocar esse item no lugar que queria...foi uma 'briga' até conseguir. Todo mundo passou por isso.

Note que uma coisa é exibir um elemento na página e outro como exibir um conjunto de elementos de maneira que esse conjunto fique com o melhor design possível ou que agrade a nós e aos clientes.

As vezes um elemento sozinho ficou bom e ao colocar um simples 'textinho' perto dele o visual ficou muito ruim. Quantas vezes ao acrescentar uma palavra numa linha esta linha que estava bem posicionada acabou com que essa linha fosse 'exibida' na linha abaixo e tudo saiu do contexto (alinhamento) das linhas acima. A mudança é pequena mas o efeito é drástico.

É uma briga difícil não só por espaço, porque cada elemento inserido quer ocupar o seu espacinho, mas também como o elemento influencia o posicionamento dos outros ao seu redor.

Outra coisa a levar em conta é o 'jeito natural do browser exibir esses elementos' não é exatamente o que pensamos ou queríamos, muito menos, como desejamos e para obtermos o visual desejado temos que instruir o browser nessa 'exibição/posicionamento', de uma maneira especial.

As vezes ao aplicar um recurso que sabemos que funciona com a tag x não funciona com a tag y.

Não podemos desconsiderar as ações de uma tag com outra tag. Por exemplo, se dentro de uma tag anchor(link) colocarmos uma imagem toda a imagem vai funcionar como um grande link e a tag link em nada modifica a tag img em matéria de espaço ou posicionamento mas sim em funcionalidade. Mas isso nem sempre ocorre dessa maneira.

Para exibir os elementos da página o browser faz de uma maneira predefinida, ou seja, a posição de cada elemento é definido por sua característica e as características dos elementos antecessores e sucessores.

Inicialmente o browser exibe tudo como um processador de textos, de cima para baixo e da esquerda para a direita. Mas o browser lida com elementos heterogenos, como imagens e textos com dimensões diferentes e ele 'tenta' fazer a coisa da melhor maneira e, às vezes, erra feio.

Portanto temos que ter o conhecimento fundamental de como o browser exibe os objetos por default para depois podermos modificar esse comportamento de maneira que fique como queremos.

Outra coisa a considerar é quando a página fica boa numa 'largura de tela' e em outra fica realmente horrível porque os elementos foram deslocados porque não cabiam no espaço da tela do dispositivo. É o caso de páginas responsivas mas graças aos midia-queries podemos 'dimensionar' ou 'reposicionar' os elementos da página de maneira que o layout final fique bom. Veremos isso a seguir, oportunamente.

O objetivo desta página e mostrar como os elementos são exibidos, alinhados e como interagem usando o default do browser e como alinhar imagens dentro da página HTML de maneira que desejarmos, sem usar recursos ( nos primeiros momentos ) como flex, position relative, fixed, etc...dos frameworks como bootstrap. Começamos o estudo pelas tags simples sem ajuda de nada além dos recursos do browser e o mais simples possível para depois irmos adicionando recursos e vendo seus efeitos.

Se fosse feito um vídeo ele teria hora de duração e no formato de texto este resumo fica bem mais conciso e você pode ir diretamente ao recurso desejado.

Para melhor visualização dos testes eu inseri as tags que estão sendo testadas dentro de uma margem vermelha do tipo style="border:1px solid red;" Estas margens foram colocadas em tags p ou div que agrupam os elementos do teste.

Conceitos iniciais

É aconselhável que você saiba os conceitos mais simples das tags pelo html5. Por exemplo, saber que uma imagem é um elemento inline. Mas mesmo as imagens já tem detalhes em sua exibição que devem ser observados especiamente quando nem todas tem as mesmas dimensões.Se quiser mais informações Clique aqui

Temos também as tags/elementos do tipo em bloco (block) que ocupa, unicamente uma linha...como as tags p, div, etc.
Se quiser mais informações Clique aqui

Básico - A maneira default de exibir as coisas do browser

O primeiro conceito fundamental para entender o posicionamento dos elementos na página é o modelo de caixa (box) do browser que é como o browser exibe os os elementos nessas 'caixinhas' , ou seja 'na mesma linha' (inline) ou em linha separadas/isoladas (block).
Se quiser uma explicação sobre esse assunto Clique aqui

Mas lhe adianto que tem uns detalhes da exibição e alinhamento que só usando as tags descobrimos que existem.

Tenho um exemplo prático de como as coisas são exibidas pelo browser feito em javascript. Para ver detalhes Clique aqui

Como o browser exibe as tags tipo Em Linha (INLINE)

Se você entendeu os conceitos acima podemos a grosso modo dizer que o browser exibe as 'caixinhas' das tags da seguinte maneira: A primeira Tag:

Adicionando uma segunda tag temos o seguinte:

E adicionando uma terceira, quarta tag chegaremos a um ponto que próxima tag não caberá na linha corrente e esta será exibida na linha seguinte, automaticamente pelo browser.

Que é mais ou mesnos como o browser exibiria um texto. Sendo assim quantas tags cabem na mesma linha é um problema que o browser resolve perguntando para o sistema operacional qual a largura da tela do dispositivo. Sendo assim antes de exibir a tag ele vê se a posição corrente somada a largura do objeto cabe na linha, se couber exibe na mesma linha senão será exibida na próxima.

Dica

Nos elementos abaixo experimente mudar a largura de exibição do browser ou exibir a página num micro e em um dispositivo móvel. Você verá que quando a tag inline não couber ela é automaticamente deslocada para baixo. Nada mal a princípio mas fique sabendo que através da css, mais especificamente, do ''media queries' poderíamos reduzir o tamanho da imagem dinamicamente com a largura da tela, até um limite, o que faria com que ela continuasse cabendo na linha .

Como o browser exibe a tag 'Em bloco' (inblock)

As tags 'em bloco' são exibidas exclusivamente em uma única linha o que significa que se ela for uma 'segunda' tag na linha antes de exibir a tag 'block' o browser irá para a próxima linha e exibirá 'em bloco' e esta ocupara totalmente a linha.
Se ela for a primeira tag da linha ela ocupará totalmente a linha.

Abaixo exibo 2 tags p que são do tipo 'em bloco' só coloquei no estilo delas um border 1px red. Só pra elucidar o que falei acima antes da primeira tag p eu coloquei um pequeno texto na linha...Veja o resultado:

PequenoTextoNaLinha

Primeira Tag p

Segunda Tag p

Foi o que eu disse...a tag block é exibido unicamente numa linha...se tiver algo na linha atual, ela vai para a próxima.

Código:
PequenoTextoNaLinha <p style="border:1px solid red">
            Primeira Tag p
</p>
<p style="border:1px solid red">
            Segunda Tag p
</p>

Que diferença faz se a tag é 'em linha' ou 'em bloco'

Simples...nas tags do tipo bloco como elas são exibidas na linha exclusivamente seu posicionamento NÃO será influenciado por outro na mesma linha.
Sendo assim o browser não tem dificuldade em alinhar o elemento a linha corrente do browser porque ele sabe a largura do dispositivo ( janela do browser) e as dimensões da tag que deseja exibir..fazendo umas continhas ele pode alinhar a imagem a esquerda, direita, centro, etc.

Já nas tags tipo 'em linha' quando existem diversas tags na mesma linha, o browser não sabe exatamente quanto cada uma delas vai ocupar de tamanho antes de sua exibição ( renderizaçã ) já que seu tamanho é definido pelo seu conteúdo e seu conteúdo é somente definido no momento que a tag é renderizada, desenhada na página. Por exemplo, um simples texto se ele for True-Type font ou uma fonte mono-espaçada a largura de cada caractere e sua separação do antecessor e sucessor só é conhecida conforme exibimos cada caractere.
Por esse motivo, falta do conhecimento da largura do elemento 'em linha', as tags de alinhamento sofrem e nem sempre funcionam com a tag.
Contudo há algumas excessões como quando o elemento em linha for o único da linha ele pode ser 'contabilizado' em seu tamanho e alinhado porque nada interfere nesse 'alinhamento'.

Chega de teoria...vamos a prática

Apesar da teoria ser fundamental o que manda é como as coisas são na prática porque precisamos saber o que foi definido pelo 'default' de exibição do browser porque você sabe que o browser exibe qualquer coisa pois tem um 'default' interno definido para tudo...não é por isso que ele vai deixar de exibir a tag.

Note que a tag sozinha funciona muito bem mas na hora que misturamos algumas na mesma linha a coisa complica.

Vamos começar por um texto simples. Se possível deixo apenas o texto mas se for necessário uso uma tag de 'container' ou 'pai' que agrupa esses textos para efeito de análise do comportamento das tags associadas, normalmente tags p, div ou span.

TEXTO Homogêno-Estudando o parâmetro align

Em todas as tags nós temos 2 posicionamentos, o vertical e o horizontal.

O parâmetro align funciona muito bem para o alinhamento horizontal das tags tipo inline sozinhas na mesma linha.

Como disse...vamos começar pelo elemento / recursos mais simples e avançarmos até os mais complicados.
Chamei de 'Texto homogêneo' porque todos os textos tem a mesma característica...mesma fonte, tamanho, etc.

Pensando em nossas dificuldades algumas tags suportam o alinhamento diretamente por um parâmetro chamado Align.

Tecnicamente o parâmetro align possui a seguinte sintaxe :

<tag align="left | right | center | justify">

Onde : left alinha a esquerda, right alinha a direita, center alinha ao centro e justify(justificado) faz com que os espaços entre as palavras do texto sejam expandidos até que a sentença ocupe a linha toda, da margem esquerda até a margem direita.

Note que esse alinhamento é puramente horizontal, ou seja, não define nada sobre o alinhamento vertical (cima, meio, em baixo).
Se você colocar um texto com um tamanho (font-size) grande e outro pequeno verticalmente ficarão bem desalinhados.

Contudo não são todas as tags que suportam o parâmetro align. Veja a lista das tags que suportam.

1 • Dinosaurescas : <applet> e <iframe>
2 • Pré-Cambrianas-Tabelas : <table>, <tr>, <td>,<tfoot>, <tbody> , <th>, <thead>
3 • Tags de pouco uso: <caption>, <col>, <colgroup> <legend>
4 • Muito importantes : <hr> ,<img> e <p>

Note que por default um texto é alinhado à esquerda da tela do browser.
Note que nada me impede de trocar uma tag div por uma tag <colgroup> e usar o recurso align, é o caso de usar o recurso certo no momento certo.
Contudo o alinhamento de divs com muitos elementos dentro é um desafio à altura especialmente com os recursos mais sofisticados.

TEXTO-Alinhando texto à direita com o parâmetro align na tag p

No exemplo abaixo alinho o texto à direita da tela colocando o parametro align-right numa tag p(parágrafo).

Teste de alinhamento com o parâmetro align na tag p (parágrafo). Tentativa de alinhar o texto a direita à direita .

Código:
<p align="right">
            Teste de alinhamento com o parâmetro align na tag p (parágrafo). Tentativa de alinhar a direita o texto.
</p>

Resumindo o parâmetro align funcionou perfeitamente na tag p (parágrafo). Como lhe disse, uma tag sózinha na linha raramente é problema.

Se você está perguntando a si mesmo que o texto não está exatamente alinhado a direita ou a esquerda da página é porque esta página está formatada por uma tag div que dá uma margem tanto à direita quando à esquerda da tela . Se você fizer uma página verá que se o texto irá 'encostar' nas margens da tela e que fica bem mais feio em materia de layout e o problema da largura da tela faz com que essa margem fique exagerada em telas excessivamente largas e perfeita em telas bem pequenas.

---

TEXTO-Alinhando texto à esquerda com o parâmetro align na tag p

Abaixo exibo o mesmo recurso alinhando à esquerda (left-que é o default).

Teste de alinhamento com o parâmetro align na tag p (parágrafo). Tentativa de alinhar o texto à esquerda da linha.

---

TEXTO-Alinhando texto ao centro com o parâmetro align na tag p

Abaixo exibo o mesmo recurso alinhando ao centro (center).

Teste de alinhamento com o parâmetro align na tag p (parágrafo). Tentativa de alinhar o texto ao centro da linha.

---

Resumindo o parâmetro align (center, left, right) funciona perfeitamente com a textos simples e homogêneos, de mesmo tamanho.

TEXTO-Alinhando texto justificado com o parametro align e a tag p

Como disse, justificado faz o texto ocupar a linha de uma margem a outra do parágrafo ou do container.

Teste de alinhamento com o parâmetro align:justify na tag p (parágrafo).

Código:
<p align="justify" style="border:1px solid red;">
            Teste de alinhamento com o parâmetro align:justify na tag p (parágrafo).
</p>

Resumindo o parâmetro align=justify NÃO funciona numa tag de texto simples ( em linha - inline ).
Para fazer funcionar com uma tag inline temos que fazer a tag inline virar uma tag tipo block. Veja exemplo abaixo.

Vai que vai vai que foi.

Mas para funcionar foi preciso uma verdadeira urucubaca:
<style>
            .justify1 {
                text-align:justify;
            }
            .justify1:after {
                content: "";
                display: inline-block;
                width: 100%;
            }
        </style>
<p style="border:1px solid red" id="tagemlinha" class="justify1">Vai que vai vai que foi.</p>

Das brabas...a primeira coisa foi colocar content:"" que informa que não existe mais nada depois da tag com justify.
A segunda foi transformar a tag em linha(inline) em tipo bloco (block) e pedir que ocupasse 100% da linha e por esse motivo conseguimos o alinhamento perfeito.

Portanto um simples align=justify não funciona.
Mas e se os textos na mesma linha forem diferentes, heterogêneos como tamanhos das fontes diferentes?.

TEXTOS Heterogêneos

Se os textos tiverem dimensões bem diferentes o que acontece? Abaixo exibo 2 linhas com textos ..a primeira linha com 4 textos de tamanhos diferentes e na segunda linha o texto é o comum só para ver o espaçamento dado.

Este é o primeiro texto Este é o segundo texto Este é o terceiro texto Este é o quarto texto
E esta é a linha inferior com um texto absolutamente normal, só para observar-mos o espaçamento

Deu para notar que os textos foram alinhados por uma 'linha imaginária inferior' e que na parte superior foi dado um espaçamento bem grande capaz de acomodar a maior fonte que solicitamos com bastante folga. Concorda comigo que esse espaço foi exagerado e você gostaria de corrigir esse problema caso ocorresse?

<p style="border:1px solid red;">
            <span style="font-size:45px;color:red;">Este é o primeiro texto</span>
            <span style="font-size:8px;color:blue;">Este é o segundo texto</span>
            <span style="font-size:22px;color:pink;">Este é o terceiro texto</span>
            <span style="font-size:12px;color:brown;">Este é o quarto texto</span>
            <br />
            E esta é a linha inferior com um texto absolutamente normal, só para observar-mos o espaçamento
</p>

A tag p é em bloco e as tags span em linha. Utilizei as tags span para criar diferenças entre os textos.

Se você conhece os recursos do browser e css pensaria : O jeito mais fácil de solucionar este problema é com position:relative com deslocamento vertical negativo.
Será se funciona ? Só por curiosidade...vamos verificar se conseguiríamos posicionar esses elementos alinhados ao centro da linha. Veja o exemplo abaixo:

Este é o primeiro texto Este é o segundo texto Este é o terceiro texto Este é o quarto texto
E esta é a linha inferior com um texto absolutamente normal, só para observar-mos o espaçamento

Pois é...deu certo...é meio deselegante mas funciona.

Código:
<p style="border:1px solid red;">
            <span style="font-size:45px;color:red;position:relative">Este é o primeiro texto</span>
            <span style="font-size:8px;color:blue;position:relative;top:-10px">Este é o segundo texto</span>
            <span style="font-size: 22px; color: pink; position: relative;top:-5px">Este é o terceiro texto</span>
            <span style="font-size: 12px; color: brown; position: relative; top: -7px">Este é o quarto texto</span>
            <br />
            E esta é a linha inferior com um texto absolutamente normal, só para observar-mos o espaçamento
</p>

Resumindo..até agora alinhamos textos na horizontal e na vertical mas isso é café com leite..o que queremos é um bom chimarrão.

Básico-IMAGENS- Simplesmente exibindo uma depois da outra

As imagens são tags do tipo inline e por esse motivo deve ou deveriam se comportar como faz a tag de texto.

Abaixo exibimos 3 imagens sem qualquer formatação.

Código:
<img src="../imagens/arduino.png" />
<img src="../imagens/Ajax1.png" />
<img src="../imagens/bootstrap.png" />

Que achou ? Bizzarro ou já esperava isso ? Confesso que eu fiquei surpreso. Esperava que fossem alinhadas como o texto, pela linha inferior...mas nao foi o que ocorreu.

Note que cada imagem é exibida da esquerda para a direita alinhadas a uma linha 'imaginária' no centro das imagens...e ai temos o primeiro detalhe interessante.

O detalhe interessante é que a primeira imagem teve um deslocamento vertical em relação ao topo da segunda imagem e o mesmo ocorre com a terceira imagem...elas não foram alinhadas verticalmente ao topo da linha mas sim ao centro da linha. Isso foi o html que fez automaticamente. Se a segunda imagem fosse maior a coisa ficaria pior ainda.

Note que nas duas imagens à esquerda temos um fundo branco que não fica muito bem na página mas se trocássemos ele pela mesma cor de fundo a primeira imagem mais à esquerda praticamente sumiria ( o azul do fundo é praticamente igual ao azul da imagem ) e a segunda ficaria relativamente boa mas a terceira seria impossível remover o fundo e isto faria sua apresentação ficar dessa maneira que não seria 'a mais bela' de ser ver numa página.

IMAGENS - Alinhamento VERTICAL - Tentando alinhar as imagens com as tags align

Como disse anterioremente o parâmetro align atua apenas na horizontal, ou seja, pode alinhar direita, a esquerda ou ao centro da linha. Verticalmente o parâmetro consegue alinhar a imagem no topo, meio ou centro da linha. Vamos ver se funciona e como funciona. Digamos que remover o fundo poderia 'amenizar' o problema mas não resolver.

Vou pegar o exemplo acima e pedir que elas sejam deslocadas verticalmente para o topo. Veja como fica

Código:
<img src="../imagens/arduino.png" align="top" />
<img src="../imagens/Ajax1.png" align="top"/>
<img src="../imagens/bootstrap.png" align="top"/>

Como podemos observar na exibição das imagens logo acima o parametro align top não funcionou para as imagens no alinhamento top... Como lhes disse o parâmetro align não funciona para deslocamentos verticais.

---

E se a tag pai solicitasse esse alinhamento

Podemos colocar as tags de imagem dentro de uma tag p ( pai ) e na tag pai solicitasse esse alinhamento vertical no topo...vamos ver como é exibido pelo browser

Código:
<p style="border:1px solid red;" align="top">
            <img src="../imagens/arduino.png" align="top"/>
            <img src="../imagens/Ajax1.png" align="top"/>
            <img src="../imagens/bootstrap.png" align="top"/>
</p>

Como podemos notar não funcionou...nada mudou...mas era esperado...alinhar a tag pai(p) ao topo não é como alinhar as tags filhas(img) ao topo.

Isso é que mata o html...algumas coisas funcionam outras não e não tem jeito que dê jeito...ou tem ?

Vamos tentar agora uma solução suja mas que funciona...o alinhamento pelo estilo realative com deslocamento vertical negativo. Veja o exemplo abaixo:

Código:
<p style="border:1px solid red;">
            <img src="../imagens/arduino.png" style="position:relative;top:-25px" />
            <img src="../imagens/Ajax1.png" style="position:relative" />
            <img src="../imagens/bootstrap.png" style="position:relative;top:-36px" />
</p>

Mais uma vez o recurso funcionou...é uma saída para o problemas mas um pouco deselegante.

---

Alinhando as imagens ao rodapé

Agora vou tentar alinhar ao rodapé da linha (bottom)...seguindo o mesmo pensamento do topo, não deverá funcionar.

Código:
<img src="../imagens/arduino.png" align="bottom" />
<img src="../imagens/Ajax1.png" align="bottom" /&/>
<img src="../imagens/bootstrap.png" align="bottom"/>

E eis que eu pensava que nada mais me surpreenderia e me surpreendi novamente. Que coisa de doido... o estilo rodapé(bottom) fez com que cada imagem fosse exibida como em bloco (block ), ou seja, cada uma em uma linha separadamente .

Portanto o alinhamento ao rodapé(bottom) de imagens pelo parâmetro align deve ser usado com muito cuidado...não age como o esperado.

Tentando alinhar as imagens com as tags align - Alinhamento HORIZONTAL

Agora começa o mundo real...a mixagem das tags dentro da página. Você vai ver que o browser age estranhamente.

Alinhamento a direita

Abaixo estou exibindo uma tag texto seguida de uma imagem com 'align=right' (alinhar a direita) seguida de uma mensagem.

Código:
<div style="border:1px solid red;">
            Isto está antes da tag img.
            <img src="../imagens/arduino.png" align="right" />
            Isto está depois da tag img.
</div>

A ordem de renderização foi feita na mesma ordem que os elementos foram definidos, ou seja, na seguinte ordem:
Primeiro a mensagem 'Isto está antes da tag img.'
A segunda coisa foi a imagem só que ela foi deslocada pelo estilo align="right".
A terceira coisa foi a mensagem Isto está depois da tag img.

O esperado seria o seguinte...são 3 tags inline então a primeira tag é exibida à esquerda (default para tag text) ..a segunda tag como tem o alinhamento à direita é exibida a direita da página e o segundo texto deveria ser exibido na linha abaixo logo após a imagem, esse é o comportamento tipico do browser quando a gente reduz a largura da janela e a tag não cabe na linha. Deveria ter ficado assim:

Essa seria a maneira mais correta de exibir o que foi pedido mas o browser não fez isso.

Note que a imagem saiu do meio das duas mensagens e foi deslocada para a direita. Embora a imagem esteja na mesma linha do texto 'Isto está antes da tag img.'

Mas o mais bizzarro foi a margem vermelha que deveria circular os 3 objetos só circulou o texto. Boa parte da imagem ficou fora da margem que a deveria circundar
. Note que raramente colocaríamos uma margem numa condição dessas mas se algum dia você precisar vai saber do problema.

Parece que a imagem 'saiu' do contexto normal da página ao utilizarmos o parâmetro align="right.
Ela devia estar no meio das mensagens mas como não daria para colocar um texto à direita de uma margem alinhada à direita,

Contudo o texto 'Isto está depois da tag img.' que deveria ser colocado após a tag img ficou a esquerda, digamos, na mesma linha da imagem. Isto ocorreu porque a imagem é grande e o texto não foi posicionado depois da tag img e ainda 'coube' na mesma linha a direita da mensagem que a antecedeu. Como ambas as tags(texto e img) são inline, exceto essa 'mistura' de espaçamento, esse é o comportamento esperado para ambas.

---

E se o texto fosse tão grande que batesse na imagem ? Veja o exemplo abaixo.

Aconteceu o que previ...o texto ficou ao redor da imagem...até que não ficou mal...usei esse efeito um milhão de vezes no word e deu um trabalhão para fazer isso.

Mas já aconteceu uma 'bizzarrice'..note que o texto seguinte apareceu a esquerda da imagem e na mesma linha ou espaço ocupado pela imagem.
Neste exemplo a coisa ficou boa mas se fosse centralizada ou à esquerda como seria ? O texto e a imagem brigariam por espaço ou mesmo 'encavalariam'?

E se tanto o texto como a imagem fossem alinhadas a direita ?

Isto está antes da tag img. Isto está depois da tag img.

Código:
<p style="text-align:right;border:1px solid red;">
        Isto está antes da tag img.
        <img src="../imagens/arduino.png" align="right" />
        Isto está depois da tag img.
</p>

Neste caso a imagem foi alinhada a direita e os textos alinhados logo a esquerda da imagem.
Aposto que não era isso que você pensou que aconteceria...mas todos são pegos com essas 'surpresas' do html.
É por isso que temos que estudar a teoria e depois por na prática porque se fosse só na prática perderíamos muito tempo.

Nossa conclusão é que ao misturarmos imagem com textos o alinhamento da imagem sempre tem prioridade sobre o alinhamento do texto .

Alinhamento a esquerda

Abaixo estou exibindo uma imagem com 'align=left' (alinhar a esquerda). Contudo antes da imagem tem um texto e depois dela tem outro texto.

Isto está antes da tag img. Isto está depois da tag img.

Código:
Isto está antes da tag img. <img src="../imagens/arduino.png" align="left" /> Isto está depois da tag img.

Eu esperava que o texto fosse exibido antes mas já vimos acima que o alinhamento de imagem tem prioridade sobre o alinhamento de texto.
Note que o texto e a imagem 'couberam' na mesma linha. Como ambas as tags(texto e img) são inline esse é o comportamento esperado para ambas.

Mas a 'colisão' do texto com a imagem não aconteceu. A imagem foi exibida e o texto foi exido logo a direita da imagem.

Portanto : Como mencionamos acima o alinhamento da imagem tem prioridade sobre o alinhamento do texto.
Portanto alinhar uma imagem horizontalmente à esquerda ou à direita faz com que a imagem seja alinhada corretamente e se houver outro elemento 'inline' ( na mesma linha ) o browser alinha a imagem e o texto será exibido em volta da imagem de acordo com seu alinhamento.

E como alinho uma imagem ao centro?

Não existe o parâmetro align=center para a tag imagem (img)...se você usar simplesmente será ignorado. Veja imagem abaixo.

Código:
<img src="../imagens/arduino.png" />

Entendendo porque não funcionou e o conceito de alinhamento

Quando pedimos para alinhar alguma coisa à direita ou à esquerda da página, mesmo que o elemento seja inline, o browser segue o seguinte funcionamento.

Centralizando a Imagem

Já que um dos problemas sérios é a centralização de elementos, vamos dar foco neles. Para entender como funciona as coisas a gente precisa pensar como elas são ou podem ser feitas.

Nós vimos acima que ao mixar imagens e texto a imagem leva prioridade em relação ao texto.

Texto antes da imagem Texto depois da imagem

Código:
<p style="border:1px solid red;">
            Texto antes da imagem
            <img src="../imagens/arduino.png" />
            Texto depois da imagem
</p>

Para centralizar uma imagem ela primeiramente teria que ser a 'única' coisa exibida na linha. Sendo assim teríamos que desligar seu estilo tipo 'inline' e mudar para 'block'. Vejamos o que dá.

texto antes da imagem texto depois da imagem

Código:
<p>
            texto antes da imagem
            <img src="../imagens/arduino.png" style="display:block;" />
            texto depois da imagem
</p>

Podemos notar que funcionou...mas os textos deveriam foram afetados pelo display-block da imagem e foram separados.

Só uma imagem no centro da página

Para pedir ao browser renderizar o elemento no centro da linha podemos usar uma tag ou estilo block. Isto faz com que a imagem seja o único elemento da linha. Vamos ver se funciona ?

Código:
<p>
  <img src="../imagens/arduino.png"/>
</p>

Funcionou perfeitamente...colocando a imagem dentro de uma tag tipo block ela foi alinhada ao centro perfeitamente.
Como lhe disse...só uma tag raramente temos problemas.
Mas só a imagem e se tiver um texto que não esteja 'colado' a imagem ?

Imagem e texto sem conflitos

Neste exemplo pedir para exibir um texto à esquerda da imagem, a imagem ao centro e outro texto à direita da imagem. Vamos ver se funciona ?

Texto antes da Imagem Texto depois da Imagem

Código:
<p>
            <span style="text-align:left">Texto antes da Imagem</span>
            <img src="../imagens/arduino.png" />
            <span style="text-align:right">Texto depois da Imagem</span>
</p>

Não funcionou corretamente...tudo foi alinhado ao centro da página. Não adiantou eu colocar a tag span pedindo para alinhar os textos à direita e à esquerda da página. Note que quando utilizamos o alinhamento da imagem + texto à direta e à esquerda tudo foi alinhado à direita ou à esquerda...imagem e texto.
O browser aplicou o mesmo alinhamento para todos os elementos da linha corrente...até que não ficou ruim mas não era o que queríamos.

---

Alinhando textos na tag span via estilo text-align

Abaixo exibo um texto com alinhamento à esquerda(default do browser-align:left), um outro texto dentro de uma tag span com alinhamento ao centro( align:center) e outro texto com alinhamento à direita(align-right). Será se funciona ?

Texto comum - Texto dentro da SPAN com estilo centralizado - Texto comum

Não funciona porque a tag text e a tag span não tem tamanho definido (são do tipo inline) e o que resta da linha poderá ser utilizado por outra tag e por esse motivo o browser não admite alinhamentos.

Código:
<span style="border:1px solid red;">
            Texto comum - <span style="text-align:center">Texto dentro da SPAN com estilo centralizado</span> - Texto comum
</span>

Vou colocar um span dentro do outro e no mais externo vou colocar width:100%

Texto comum - Texto dentro da SPAN com estilo centralizado - Texto comum

Não funciona porque tanto o o texto como a tag span são inline e não tem definição de tamanho próprio e nem podemos definir porque elementos inline tem seu tamanho definido browser dinâmicamente.

Código:
<span style="width:100%;border:1px solid red;">Texto comum - <span style="text-align:center">Texto dentro da SPAN com estilo centralizado</span> - Texto comum</span>

Alinhando textos com tags div e estilo float:left/right

Float é um recurso da CSS que faz com que os elementos block sejam alinhados como elementos inline. Veja o exemplo abaixo:

Style Float funcionou mas para texto já temos o parâmetro align com a vantagem que o align tem o alinhamento central e o float não e a gente não precisa das divs para isso. style=clear:both nas tags seguintes senão o espaço do float não seria computado e outras tags poderiam sobrescrever seu conteúdo.

Código:
<div style="float:left;border:1px solid red;">Texto1</div>
<div style="float:right;border:1px solid red;">Texto2</div>
<br style="clear:both" />

Não funcionaram o alinhamento do texto dentro de uma div com os styles:

Temos outros recursos da CSS : align-items, align-content

Fonte:
<div style="align-content: center;">Texto</div>
        <div style="align-items: center;">Texto</div>
        <div style="align-self:center;">Texto</div>
        <div style="align-content: center">Texto</div>

Texto dentro de uma div - Utilizando o parametro align para alinhar o texto

Funciona mas tem o problema de que cada div é exibida em uma linha separada.

Fonte:
<div align="left">div - aling left - Alinhamento à esquerda</div>
        <div>div - aling center - Alinhamento no centro</div>
        <div align="right">div - aling right - Alinhamento à direita</div>

Utilizando style="display:inline-block;width:33%" e align="right/center/left" na div

Nota : Funcionou perfeitamente para 3 itens e funcionaria para 4,5.
Utilizar este método

Fonte:
<div style="display:inline-block;width:33%" align="left">div - aling left - Alinhamento à esquerda</div>
        <div style="display:inline-block;width:33%">div - aling center - Alinhamento no centro</div>
        <div style="display:inline-block;width:33%" align="right">div - aling right - Alinhamento à direita</div>

Fazendo um teste...vou utilizar style="display:inline-block;width:20%" e align="right/center/left" na div para numa linha colocar 5 colunas

Quando eu coloquei 20% o elemento mais a direita foi quebrado e colocado na linha inferior. Isso se deve ao efeito responsivo do bootstrap que uso nesta página mas não ocorreria numa página sem bootstrap. Note que ao reduzir para 15% o próprio conteúdo da coluna ficou exprimido e foi quebrado em mais de uma linha. Isso é o default do bootstrap agindo.

Fonte:
div style="display:inline-block;width:20%;border:1px red;" align="left">div-aling left - Alinhamento à esquerda</div>
div style="display:inline-block;width:20%;border:1px red;">div - aling center - Alinhamento no centro 1</div>
div style="display:inline-block;width:20%;border:1px red;">div - aling center - Alinhamento no centro 2</div>
div style="display:inline-block;width:20%;border:1px red;">div - aling center - Alinhamento no centro 3</div>
div style="display:inline-block;width:20%;border:1px red;" align="right">div - aling right - Alinhamento à direita</div>

Fazendo outro teste...criando uma linha com 5 colunas texto mas usando o bootstrap

Se você não conhece o bootstrap ele divide a linha em partes iguais, se tiver uma coluna ocupa todo o espaço, se tiver 2 dados na linha divide em 50% e 50% para cada...se for 3...33% e assim por diante, automaticamente.

Fonte:
<div class="container">
            <div class="row">
                <div class="col-sm">
                    Coluna 1
                </div>
                <div class="col-sm">
                    Coluna 2
                </div>
                <div class="col-sm">
                    Coluna 3
                </div>
                <div class="col-sm">
                    Coluna 4
                </div>
                <div class="col-sm">
                    Coluna 5
                </div>
            </div>
        </div>

Por isso recomendamos muito o uso dos frameworks...muitos dos problemas que enfrentamos no dia-a-dia já estão resolvidos no bootstrap. Como exemplo, vou colocar outro exemplo com 5 colunas mas com o comprimento do texto diferente e veja como o bootstrap trata a diferença com elegância.